<template>
<!-- 居家检测 /密切跟踪-->
    <div class="quan">
        <div class="ju">
            <span>居家检测/密切跟踪</span>
        </div>
        <div class="head" :key="jie">
            <div class="name">
                <span>{{ name }}</span>
                <span>{{zhen}}</span>
            </div>
            <div class="xia">
                <span class="xia1">身份证号:</span>
                <span>{{ shen }}</span>
            </div>
            <div class="xia">
                <span class="xia1">手机号:</span>
                <span>{{ shou }}</span>
            </div>
            <div class="xia">
                <span class="xia1">居家检测时段:</span>
                <span>{{ shi }}至{{ shi1 }}</span>
            </div>


        </div>
        <div class="zhong">
            <span class="zhong1">体温测试</span>
            <router-link :to="{name:'miqie2', query: {id:jie}}"><span>核酸检测登记</span></router-link>
        </div>
        <div class="hh">
            <div class="hh1">
                <el-table :data="tableData" border style="width: 100%"  #default="scope" >
                    <el-table-column type=index label="序号" align="center" min-width="20%" />
                    <el-table-column prop="date" label="日期" align="center" min-width="30%" />
                    <el-table-column prop="temperature" label="体温（°）" align="center" min-width="50%">
                        <template #title="scope">
                            <el-input style="width: 100px" align="center" v-model="scope.row.address" type="text" />
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div>
                <el-button class="xin" type="primary" @click="show">新增一行</el-button>
                
                <teleport to="body">
                    <!-- to后面的地址还可以是 html  或者其他 div等 -->
                    <!-- 表示将teleport包裹的这个div,移动到html这个结构中 -->
                    <div class="mask" v-if="isShow.showDialog">
                        <div class="dialog1">
                            <h2>新增体温记录</h2>
                            <div class="tan">
                                <span>日期:</span>
                                <el-input style="width: 300px" align="center" v-model="xdata"  />
                            <br>
                            <span>体温:</span>
                            <el-input style="width: 300px" align="center" v-model="xri"  />
                           </div>
                            
                            <el-button class="dialog-btn" @click="hidden" type="primary" round>返回</el-button>
                            <el-button class="dialog-btn" @click="hidden2" type="primary" round>确认</el-button>
                        </div>
                    </div>
                </teleport>
            </div>
            <router-link to="/meir"><el-button type="info" class="fan" round>返回</el-button></router-link>
        </div>

    </div>
</template>

<script lang="ts">
import { defineComponent, reactive,ref,onBeforeMount,onMounted,toRefs } from 'vue'
import { useRoute } from 'vue-router'
import axios from '@/views/chen/http'
export default defineComponent({
    name: "miqie",
    setup() {
        const route = useRoute()
        const jie = route.query.id; //接收跳转参数;
        let name=ref("");//跳转名字
        let zhen=ref("");//接收正常异常
        // let tableData = [
        //     {
        //         date: 1,
        //         name: '2020-01-01',
        //         address: '36.5',
        //     },
        //     {
        //         date: 2,
        //         name: '2020-01-02',
        //         address: '36.3',
        //     },
        //     {
        //         date: 3,
        //         name: '2020-01-03',
        //         address: '36.2',
        //     },
        //     {
        //         date: 4,
        //         name: '2020-01-04',
        //         address: '36.5',
        //     },
        // ];
        let tableData1=reactive({
            tableData:[
            {
            },
            ]
        })
        let mydata =reactive ({
            shen: "1245690218233",
            shou: "18082223422",
            shi: "2002-10-01 14:00 ",
            shi1:""
        });
        //模态框
        let isShow = reactive({
            showDialog: false,//模态框
        });
        function show() {
            isShow.showDialog = true; //激活模态框
        };
        function hidden() {
            isShow.showDialog = false; // 返回关闭模态框
        };
        let xdata=ref("");
        let xri=ref("");
        
        
        function hidden2(){ //进行数据导入
            // let a=tableData1.tableData[tableData.length-1].date+1;//获取当前最后的序号
            let b=xdata.value; //新增日期
            let c=xri.value; //新增体温
            if(b&&c){
                isShow.showDialog = false;
                // console.log(xdata.value);
                // tableData1.tableData.push({date:a,name:b,address:c});
                // console.log(tableData);
                //添加体温
                axios({
                    method:"post",url:"dailyAgent/AddTemperature",
                    params:{id:jie,date:b,temperature:c}
                }).then((res)=>{
                    // console.log(tableData1);
                    axios({
                        method:"get",url:"dailyAgent/FindTemperature",params:{id:14}
                    }).then((res)=>{
                        
                        var a=res.data.data;
                        tableData1.tableData=a
                        // console.log(a);
                    })
                    
                    
                }).catch((err)=>{
                    console.log(err);
                    
                })
                
                
            }
            else{
                alert("请输入内容")
            }
        };
        onMounted(async()=>{
        //挂载前获取全部参数
        //展示全部数据
         //获取姓名这些的数据
          await axios({
            method:"get",url:"dailyAgent/DayDoShowDetailAndFollowClosely",
            params:{id:jie}
           }).then((res)=>{
            
            let a=res.data.data[0]
            name.value=a.name;
            zhen.value=a.normalOrAbnormal;
            mydata.shou=a.phoneNum;
            mydata.shen=a.phoneNum;
            mydata.shi=a.startDate;
            mydata.shi1=a.removeDate;
            // console.log(a);
           })
         //获取体温数据
         axios({
            method:"get",url:"dailyAgent/FindTemperature",params:{id:jie}
           }).then((res)=>{
            
            var a=res.data.data;
            tableData1.tableData=a
            // console.log(a);
           })
            
        })
        onBeforeMount(()=>{
            // console.log(222);
            
        
        
      })
      
        return {
            ...toRefs(tableData1),name,...toRefs(mydata),show,hidden,isShow,xdata,xri,
            hidden2,zhen,jie
        }
    }
})


</script>

<style scoped lang="less">
.hh {
    width: 100%;
    height: 800px;
    background-color: rgb(255, 255, 255);
}

.quan {
    width: 100%;
    height: 700px;
}

// 设置表头样式
/deep/ .el-table th {
    background-color: #f9f9f9 !important;
    color: black;
    Font-weight: 400; // 字体粗细

}

.ju {
    padding: 20px 0px 20px 0px;
}

.head {
    background-color: #ffffff;
    width: 100%;
    height: 172px !important;
}

.zhong {
    width: 298px;
    height: 42px;
    margin-top: 20px;
    background-color: #ffffff;
}

.zhong span {
    display: inline-block;
    width: 50%;
    height: 100%;
    text-align: center;
    margin-top: 10px
}

.zhong1 {
    border-bottom: 2px solid #338ae5;
}

.hh1 {
    padding-top: 50px;
    margin-left: 35px;
    margin-right: 35px
}

.name {
    padding: 20px 60px 20px 20px;
    display: flex;
    justify-content: space-between
}

.name span {
    font-size: 30px;
    color: #333333
}

.xia {
    padding-left: 20px;
    margin-top: 3px;
}

.xia1 {
    width: 100px;
    display: inline-block;
    margin-right: 20px;
}

.mask {
    /* 创建遮罩层 */
    position: fixed;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.dialog1 {
    text-align: center;
    width: 600px;
    height: 400px;
    background: rgb(255, 255, 255);
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 10px;
    /* top和left这个两个50%表示的是，这个弹框的顶部到页面的顶部，弹框的左侧到页面的左侧 */
    transform: translate(-50%, -50%);
    /* 这个偏移表示的是，偏移这个div框自身宽度和高度的50% */
    h2{
        margin-top:35px
    }
}
.xin {
    margin-left:35px;
    margin-top:35px;
    width: 174px;
    height: 40px;
    font-size:16px
}
.tan{
    margin:40px 0px 80px 0px
}
.tan span{
    display:  inline-block;
    padding-top:20px;
    margin-right:5px
}
.fan{
    margin-left:35px;
    margin-top:30px
    }
</style>